<template>
  <div class="gooods-detail-contain">
    <!-- <div class="header bg-grey">
        <div class="header-left">
            <div class="back" @click="handleReturn">
                <i class="i-left"></i>
            </div>
        </div>
        <div class="header-middle m-l-12"><span class="font-black">商品详情</span></div>
        <div class="header-right"></div>
    </div> -->
    <div class="goods public-contain">
      <van-swipe class="goods-swipe" :autoplay="3000">
        <van-swipe-item
          style="margin: 0 auto;text-align: center"
          v-for="thumb in detail.goodsImgList"
          :key="thumb"
        >
          <img v-lazy="thumb" />
          <!--<div class="img-discount" v-if="discountImage=='discount'">-->
          <!--<img :src="img_discount">-->
          <!--</div>-->
          <!--<div class="img-discount-footer" >-->
          <!--<img :src="img_discount_footer">-->
          <!--</div>-->
        </van-swipe-item>
      </van-swipe>
      <div class="goods-price">
        <div class="goods-price__item">
          <div>
            <span class="tag" v-if="detail.promotionalPrice > 0"
              >{{ detail.promotionalDiscount }}折价</span
            ><span class="symbol">￥</span
            ><span class="price">{{
              detail.promotionalPrice > 0
                ? detail.promotionalPrice
                : detail.retail_price
            }}</span>
          </div>
          <div v-if="detail.fightGroupPrice > 0">
            <span class="tag mg-l">拼单价</span><span class="symbol">￥</span
            ><span class="price">999.00</span>
          </div>
          <span v-if="isSpike == 1"
            >共{{ detail.goods_number ? detail.goods_number : 0 }}件</span
          >
          <span v-else
            >已售{{ detail.sell_volume ? detail.sell_volume : 0 }}件</span
          >
        </div>
        <div>
          <del>原价：{{ detail.market_price }}</del>
        </div>
      </div>
      <div class="goods-title">
        <span>{{ detail.name }}</span>
        <!-- <span class="share" @click="handleShare"><i class="i-share"></i>分享</span> -->
      </div>
      <div class="goods-tips" @click="handleShowTips">
        <span>全场包邮</span>
        <i class="i-right"></i>
      </div>
      <div class="goods-merge" v-if="detail.fightGroupPrice > 0">
        <div class="goods-merge__header">
          <div class="goods-merge__header__left">601人正在拼单，可直接参与</div>
          <div class="goods-merge__header__right">
            <span>查看全部</span><i class="i-right"></i>
          </div>
        </div>
        <div class="goods-merge_list">
          <div class="goods-merge_list__item">
            <div class="item-left">
              <img src="../../assets/images/2.png" />
              <div>测试测试</div>
            </div>
            <div class="item-right">
              <div>
                <div>还差1人拼成</div>
                <div>剩余<span class="text-red">20:25:10</span></div>
              </div>
              <button class="btn-merge">去拼单</button>
            </div>
          </div>
          <div class="goods-merge_list__item">
            <div class="item-left">
              <img src="../../assets/images/2.png" />
              <div>测试测试</div>
            </div>
            <div class="item-right">
              <div>
                <div>还差1人拼成</div>
                <div>剩余<span class="text-red">20:25:10</span></div>
              </div>
              <button class="btn-merge">去拼单</button>
            </div>
          </div>
        </div>
      </div>

      <div class="goods-detail">——| 图文详情 |——</div>
      <div class="goods-detail-img">
        <img
          v-lazy="imageShow(val.img_url)"
          v-for="val in detail.list_pic_url"
        />
        <!--<img class="" :src="detail.list_pic_url">-->
      </div>
      <div class="goods-recommend" v-if="recommend">
        <div class="goods-recommend-header">
          <span class="i-tag"></span>畅销推荐
        </div>
        <div class="goods-recommend-item">
          <div class="goods-panel">
            <img src="../../assets/images/2.png" />
            <div class="title">
              和田玉圆牌牌新品️S925纯银镶嵌扣头伴镶碧玉简约大方
            </div>
            <div class="sales">
              <span>￥7000</span>
              <span>已售900</span>
            </div>
          </div>
          <div class="goods-panel mg-l">
            <img src="../../assets/images/2.png" />
            <div class="title">
              和田玉圆牌牌新品️S925纯银镶嵌扣头伴镶碧玉简约大方
            </div>
            <div class="sales">
              <span>￥7000</span>
              <span>已售900</span>
            </div>
          </div>
        </div>
        <div class="goods-recommend-item">
          <div class="goods-panel">
            <img src="../../assets/images/2.png" />
            <div class="title">
              和田玉圆牌牌新品️S925纯银镶嵌扣头伴镶碧玉简约大方
            </div>
            <div class="sales">
              <span>￥7000</span>
              <span>已售900</span>
            </div>
          </div>
          <div class="goods-panel mg-l">
            <img src="../../assets/images/2.png" />
            <div class="title">
              和田玉圆牌牌新品️S925纯银镶嵌扣头伴镶碧玉简约大方
            </div>
            <div class="sales">
              <span>￥7000</span>
              <span>已售900</span>
            </div>
          </div>
        </div>
      </div>

      <div class="goods-bottom">
        <div class="join" v-if="detail.fightGroupPrice > 0">
          <div class="join-left">
            <img src="../../assets/images/2.png" />
            <div>剩余<span class="text-red">20:00:14</span>还差1人</div>
          </div>
          <button class="btn-join" @click="handleMerge">参与凭单</button>
        </div>
        <div class="action">
          <div class="collect">
            <i class="i-collect"></i>
            <div>收藏</div>
          </div>
          <div class="server">
            <i class="i-server"></i>
            <div>客服</div>
          </div>
          <div class="btn-buy" v-if="detail.fightGroupPrice > 0">
            <div>￥1024</div>
            <div>单独购买</div>
          </div>
          <div class="btn-merge" v-if="detail.fightGroupPrice > 0">
            <div>￥998</div>
            <div>发起拼单</div>
          </div>
          <div class="btn-buy-now" @click="handleBuy">立即购买</div>
        </div>
      </div>

      <div class="merge-join-contain" v-if="joinShow">
        <div class="close" @click="handleClose">×</div>
        <div class="join-title">参与娱乐娱乐的拼单</div>
        <div class="join-desc">仅剩1个名额，20:30:22后结束</div>
        <div class="join-user">
          <img src="../../assets/images/2.png" />
          <span>
            <i class="i-ask"></i>
          </span>
        </div>
        <button class="btn-join">立即参与</button>
      </div>
      <div class="merge-overlay" v-if="joinShow"></div>
    </div>
    <div class="show-box" v-if="showBox">
      <div class="binding">
        <div class="binding-header">
          <div class="space"></div>
          <div class="title">前往北聊APP商城购买</div>
          <div class="space"></div>
          <!-- <i class="i-close" @click="handleClose"></i> -->
        </div>
        <div class="binding-footer">
          <button class="btn-cancel" @click="handleCancel">取消</button>
          <button class="btn-submit" @click="handleGoto">前往商城</button>
        </div>
      </div>
      <div></div>
  </div>
  <div class="show-box-overlay" v-if="showBox"></div>
    <van-action-sheet v-model="show" title="服务说明">
      <div class="explain-tips">
        <li>全场包邮</li>
        <div class="explain-tips__text">全场商品包邮</div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { autoLogin } from '@/utils'   
import { getGoodsDetail } from "@/api/goods";

export default {
  data() {
    return {
      showBox: false,
      isSpike: 0,
      joinShow: false,
      show: false,
      discountImage: "",
      img_discount: "https://images.bdchats.com/prod/upload/discount.png",
      img_discount_footer:"https://images.bdchats.com/prod/upload/discount_footer.png",
      param: {
        id: ""
      },
      recommend: false,
      detail: {
        goods_sn: "",
        goods_id: "",
        name: "和田玉圆牌牌新品️S925纯银镶嵌扣头伴镶碧玉简约大方",
        brief: "",
        retail_price: "",
        list_pic_url: [],
        primary_pic_url: "",
        sell_volume: 0,
        goodsImgList: [],
        fightGroupPrice: 0,
        promotionalPrice: 0,
        promotionalDiscount: 0,
        market_price: 0
      },
      from: ""
    };
  },
  created() {
    autoLogin()
    this.isSpike = sessionStorage.getItem("isSpike");
    this.discountImage = sessionStorage.getItem("discount_image");
    this.param.id = this.$route.params.id;
    this.from = this.$route.query.from;
    this.getDetail();
  },
  methods: {
    handleReturn() {
      if (this.from === "share") {
        this.$bridge.call("close");
      } else {
        this.$router.go(-1);
      }
    },
    imageShow(src) {
      const img = {};
      img.loading = require("@/assets/images/loading.gif");
      img.src = src;
      return img;
    },
    handleClose() {
      this.joinShow = false;
    },
    handleMerge() {
      this.joinShow = true;
    },
    getDetail() {
      getGoodsDetail(this.param).then(response => {
        const data = response.data.info;
        if (data) {
          this.detail.goods_sn = data.goods_sn;
          this.detail.goods_id = data.goods_id;
          this.detail.name = data.name;
          this.detail.brief = data.brief;
          this.detail.retail_price = data.retail_price;
          this.detail.fightGroupPrice = data.fightGroupPrice
            ? data.fightGroupPrice
            : 0;
          this.detail.promotionalPrice = data.promotionalPrice
            ? data.promotionalPrice
            : 0;
          this.detail.promotionalDiscount = data.promotionalDiscount
            ? data.promotionalDiscount
            : 0;
          this.detail.market_price = data.market_price ? data.market_price : 0;
          this.detail.sell_volume = data.sell_volume ? data.sell_volume : 0;
          this.detail.goods_number = data.goods_number ? data.goods_number : 0;
          this.detail.list_pic_url = response.data.detailPics;
          if (!response.data.gallery || response.data.gallery.length === 0) {
            const temp = {};
            temp.loading = require("@/assets/images/loading.gif");
            temp.src = response.data.info.primary_pic_url;
            this.detail.goodsImgList.push(temp);
          } else {
            for (const item of response.data.gallery) {
              const temp = {};
              temp.loading = require("@/assets/images/loading.gif");
              temp.src = item;
              this.detail.goodsImgList.push(item.img_url);
            }
          }
          if (
            !response.data.detailPics ||
            response.data.detailPics.length === 0
          ) {
            const temp = {};
            temp.img_url = response.data.info.list_pic_url;
            this.detail.list_pic_url.push(temp);
          }
        }
      });
    },
    handleShowTips() {
      this.show = true;
    },
    handleShare() {
      Base64 = require("js-base64").Base64;
      const base64 = Base64.encode(this.param.id);
      const shareContent =
        "【" +
        this.detail.name +
        "】" +
        "，复制这句话¢" +
        base64 +
        "¢后咑閞北聊商城。";
      this.$bridge.call("shareCommand", shareContent);
    },
    formatPrice(price) {
      return (price * 1).toFixed(2);
    },
    handleAddCart() {
      // this.$router.push('cart');
    },
    handleBuy() {
      // this.showBox = true
      this.$router.push({ path: "/order/" + this.param.id });
    },
    handleGoto() {
      window.location.href = "http://www.bdchats.com/"
    },
    handleCancel(){
      this.showBox = false
    }
  }
};
</script>
